<!--
    * Time    : 2021-04-25 16:14:50
    * Author  : zhangTj
    * Desc    : 退出登录页面 - 微信浏览器专用
-->

<template>
    <div class="w750">
        <div class="flex-center flex-column my-4">
            <div style="width: 60px; height: 60px">
                <img v-if="userInfo.headPortrait" :src="$imgUrlHead + userInfo.headPortrait" alt="" class="w-100 h-100 rounded-circle" />
                <img v-else src="@/assets/images/head-default.png" alt="" class="w-100 h-100 rounded-circle" />
            </div>
            <span class="mt-1 font-14">{{ userInfo.nickName || '匿名用户' }}</span>
        </div>
        <div class="flex-center flex-column font-14">
            <div class="border border-main rounded-12 py-1 px-2 text-555 mx-4" :style="bgColor01">
                <div class="font-weight border-bottom border-c-main pb-1 mb-2" :style="borderColor">
                    <span>退出登录后，将会有以下影响：</span>
                </div>
                <div class="px-1">
                    <div class="d-flex a-center mb-2">
                        <div class="mr-1" style="width: 30px; height: 30px">
                            <img src="@/assets/images/ext-wx.png" alt="" class="w-100 h-100" />
                        </div>
                        <span>您的商城账号将与微信号解绑</span>
                    </div>
                    <div :class="[showTip ? 'mb-1' : 'mb-2']">
                        <div class="d-flex a-center">
                            <div class="mr-1 bg-main flex-center rounded-circle" style="width: 30px; height: 30px">
                                <span class="iconfont iconqianbao1" style="color: #fff"></span>
                            </div>
                            <span>将无法使用该账户的资产下单</span>
                        </div>
                        <div
                            v-if="showTip"
                            class="font-12 position-relative rounded-20"
                            style="padding: 2px 10px; margin-top: 15px; color: #565656"
                            :style="bgColor05"
                        >
                            <div class="arrow"></div>
                            <svg height="10" style="fill: currentColor; color: #fff; margin-top: 2px; width: 100%">
                                <text dominant-baseline="top" textLength="200" font-size="9" x="2" y="8">
                                    该账户下有{{ userInfo.balance ? userInfo.balance + `元` : '' }}{{ userInfo.balance && userInfo.coupon ? `、` : ''
                                    }}{{ userInfo.coupon ? userInfo.coupon + `张优惠卷` : '' }}待使用
                                </text>
                            </svg>
                        </div>
                    </div>

                    <div class="d-flex a-center mb-2">
                        <div class="mr-1 bg-main flex-center rounded-circle" style="width: 30px; height: 30px">
                            <span class="iconfont iconorder-guider-order" style="color: #fff"></span>
                        </div>
                        <span>查询不到该账户订单物流信息</span>
                    </div>
                    <div class="d-flex a-center mb-1">
                        <div class="mr-1 bg-main flex-center rounded-circle" style="width: 30px; height: 30px">
                            <span class="iconfont iconyouhuiquan" style="color: #fff"></span>
                        </div>
                        <span>无法领取优惠卷和积分</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="position-fixed w-100 left-0 bottom-0 safearea-bb-white">
            <van-divider>确认退出登录吗？</van-divider>
            <div class="d-flex mt-20 text-center px-2 py-1 font-14">
                <div @click="wxLogout" class="flex-1 rounded-20 border border-ccc mr-1 py-1">
                    <span>退出登录</span>
                </div>
                <div @click="toBack" class="flex-1 text-fff bg-main rounded-20 border py-1">
                    <span>保持登录</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getMyHome } from 'api/my'
import { wxthirdLogout } from 'api/account'
import { mapState } from 'vuex'
import { colorRgb } from '@/utils/utils'

export default {
    name: 'logoutPage',
    components: {},
    data() {
        return {
            userInfo: '', // 用户信息
            showTip: false // 是否显示余额和优惠卷
        }
    },
    computed: {
        ...mapState(['themes']),
        // 透明背景颜色
        borderColor() {
            return {
                borderColor: `rgba(${colorRgb(this.themes.color).r}, ${colorRgb(this.themes.color).g}, ${
                    colorRgb(this.themes.color).b
                }, 0.5) !important`
            }
        },
        bgColor01() {
            return {
                background: `rgba(${colorRgb(this.themes.color).r}, ${colorRgb(this.themes.color).g}, ${
                    colorRgb(this.themes.color).b
                }, 0.1) !important`
            }
        },
        bgColor05() {
            return {
                background: `rgba(${colorRgb(this.themes.color).r}, ${colorRgb(this.themes.color).g}, ${colorRgb(this.themes.color).b}, 1) !important`
            }
        }
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getUserData()
    },
    methods: {
        // 获取用户信息
        getUserData() {
            getMyHome().then((res) => {
                if (!res.success) {
                    this.$toast({ duration: 1000, message: res.msg })
                    return
                }
                this.userInfo = res.result

                // 如果余额和优惠券不会空时显示提示
                if (res.result.balance || res.result.coupon) {
                    this.showTip = true
                }
            }),
                () => {
                    this.$toast({ duration: 1000, message: '获取数据失败' })
                }
        },

        // 微信浏览器退出登录
        wxLogout() {
            this.$utils.uThrottle(() => {
				wxthirdLogout('weixin', 'h5')
				    .then((res) => {
				        if (!res.success) {
				            this.$toast(res.msg)
				            return
				        }
						window.localStorage.clear()
						window.sessionStorage.clear()
						this.$router.replace({ path: '/' })
				        this.$toast({
				            message: '退出登录成功~',
							duration: 2000
				        })
				    })
				    .catch((err) => {
				    })
			})
        },

        // 返回上一个页面
        toBack() {
            this.$router.back()
        }
    }
}
</script>

<style scoped>
/* 三角形箭头 */
.arrow,
.arrow:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px;
    border-color: transparent transparent var(--themescolor) transparent;
    position: absolute;
    left: 9px;
    top: -13px;
}
</style>
